<template name="list">
	<view class="content"> 
	    <cu-custom bgColor="bg-red" :isBack="true"><block slot="backText">返回</block><block slot="content">菜单1</block></cu-custom><!-- 状态栏站位 -->
		<view class="cu-bar bg-red search" :style="[{top:CustomBar+ 'px',opacity:0}]"></view><!-- 占位 -->
		<view :style="[{position:'fixed',width:'100%','z-index':'99',top:CustomBar+ 'px'}]">
			<view class="cu-bar bg-red search"><!-- 搜索栏 -->
				<view class="action">
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="picker">
							<text>{{index>-1?picker[index]:'请选择'}}</text>
							<text class="cuIcon-triangledownfill"></text>
						</view>
					</picker>
				</view>
				<view class="search-form radius" style="margin:0 30upx 0 0">
					<text class="cuIcon-search"></text>
					<input v-model="searchVal" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="关键字搜索" confirm-type="search"></input>
				</view>
				<view class="action" @tap="searchHandle()">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view style="height:calc(100vh - 250upx)">
			<mescroll-uni  @down="downCallback"  @up="upCallback" :fixed='false'>
				<view v-for="(item,index) in dataList" :key="index" @tap="details(item.id)">
					<view class="cu-bar bg-white solid-bottom margin-top-sm">
						<view class="action">
							<text class="cuIcon-title text-red"></text> 
							<view>
								<view class="text-black text-lg">
									 {{item.workSite}}
									 <text v-if="item.workType">{{item.workType}}</text>
									 <text v-if="item.height">{{item.height}}</text>
								</view>
								<view class="text-gray text-xs" style="margin-top: 5upx;">{{item.workNo}}</view>
							</view>
						</view>
						<view class="action">
							<view v-if="item.status==1" class='cu-tag bg-green radius'>已完成</view>
							<view v-if="item.status==0" class='cu-tag bg-red radius'>未完成</view>
						</view>
					</view>
					<view class="padding bg-white"> <!-- padding-bottom-xs -->
						<view class="grid col-2">
						 <view class="padding-bottom-sm" :class="indexs%2==0?'dashed-right':'padding-left-sm'" v-for="(item,indexs) in contentList" :key="indexs">
							  <view class="text-green text-sm">{{item.name}}</view>
							  <view class="text-grey text-md">{{item.value}}</view>
						  </view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar foot bg-white">
			<button class="cu-btn bg-red lg" style="width: 100%;border-radius: 0!important;" @tap="add">新 增</button>
		</view>
	</view>
	
</template> 

<script>
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import * as $http from '@/api/list.js'
export default {
	name: "list",
    data() {
        return {
			CustomBar: this.CustomBar,//状态条
			InputBottom: 0,
			searchVal:"",
			dataList:[],
			contentList:[{
				name:'测试名称',
				value:'测试值'
			},{
				name:'测试名称',
				value:'测试值'
			},{
				name:'测试名称',
				value:'测试值'
			},{
				name:'测试名称',
				value:'测试值'
			}],
			mescroll:null,
			picker:["关键字","日期"],//搜索类型选择
			index:-1,//搜索类型当前选择的下标
        };
    },
    onLoad() {
    },
    components:{
    	MescrollUni
    },
    methods: {
		searchHandle(){//点击搜索按钮触发
			this.downCallback(this.mescroll)
		},
		InputFocus(e) {
			this.InputBottom = e.detail.height
		},
		InputBlur(e) {
			this.InputBottom = 0
		},
		PickerChange(e) {//搜索类型选择change
			this.index = e.detail.value
		},
		getList(mescroll,page,limit){//获取list数据
			let _this = this
			let param = {
				filters:{"groupOp":"AND","rules":[{"field":"work_no","op":"cn","data":this.searchVal}]},
				page:page,
				limit:limit
			};
			// $http.getList(param).then( res => {
			// 	if(res.code == 0){
			// 		// this.dataList = res.page.list
			// 		// 接口返回的当前页数据列表 (数组)
			// 		let curPageData = res.page.list; 
			// 		// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
			// 		let totalPage = res.page.totalPage; 
			// 		// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
			// 		let totalSize = res.page.totalCount; 
			// 		// 成功隐藏下拉加载状态
			// 		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			// 		mescroll.endByPage(curPageData.length, totalPage); 
			// 		//设置列表数据
			// 		if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			// 		this.dataList = this.dataList.concat(curPageData); //追加新数据
			// 	}
			// }).catch( err => {
			// 	// 失败隐藏下拉加载状态
			// 	mescroll.endErr()
			// });
		},
		/*下拉刷新的回调, 有三种处理方式: */
		downCallback(mescroll){
			this.mescroll = mescroll
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			// 此时mescroll会携带page的参数:
			let pageNum = mescroll.num; // 页码, 默认从1开始
			let pageSize = mescroll.size; // 页长, 默认每页10条
			this.getList(mescroll,pageNum,pageSize)
		},
		details(id){//跳转到详情页
			uni.navigateTo({
				url: "./info?id="+id
			})
		},
		add(){//跳转到新增页
			uni.navigateTo({
				url: "./add-or-update"
			})
		}
    }
};
</script>

